<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      fullscreen
      custom-class="detail-dialog"
    >
      <div class="dialog-close">
        <el-button icon="el-icon-close" circle @click="dialogClose" />
      </div>
      <div class="dialog-content">
        <slot />
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  props: {
      dialogVisible: {
          type: Boolean,
          default: () => false
      }
  },
  methods: {
      dialogClose() {
          this.$emit('dialogClose')
      }
  }
}
</script>
<style lang="scss" scoped>
:deep(.detail-dialog){
    background: #F9F9F9;
    .el-dialog__header{
        display: none !important;
    }
    .el-dialog__body{
        padding: 0;
        margin: 0;
    }
    .dialog-close{
       position: fixed;
       right: 20px;
       top: 5px;
    }
}
</style>
